<template>
    <div class="app-container">
        <el-card class="box-card">
            <el-button type="primary" size="default" @click="handleAdd">新增</el-button>
            
            <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="tableData"
                border
                class="mt-3"
                stripe
                style="width: 100%"
                tooltip-effect="dark"
            >
                <el-table-column label="序号" type="index" :index="indexMethod" prop="user_code" width="100px"></el-table-column>
                <el-table-column label="品质ID" prop="quality_id"></el-table-column>
                <el-table-column label="技能ID" prop="skill_id"></el-table-column>
                <el-table-column label="效果值" prop="count"></el-table-column>
                <el-table-column label="拓展配置" prop="ext"></el-table-column>
                <el-table-column label="品质等级" prop="quality.level"></el-table-column>
                <el-table-column label="品质昵称" prop="quality.name"></el-table-column>
                <el-table-column label="品质icon" prop="quality.icon">
                    <template slot-scope="{row}">
                        <el-image v-if="row.quality.icon" :src="row.quality.icon" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="技能昵称" prop="skill.name"></el-table-column>
                <el-table-column label="技能图标" prop="skill.icon">
                    <template slot-scope="{row}">
                        <el-image v-if="row.skill.icon" :src="row.skill.icon" fit="fill" :lazy="true"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="text"
                            @click="handleEdit(scope.row)"
                        >编辑
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!-- 分页 -->
            <cus-pagination
                v-show="total > 0"
                :limit.sync="listQuery.perPage"
                :page.sync="listQuery.page"
                :total="total"
                @pagination="getTableData"
            />
        </el-card>
  
        <el-dialog
            title="编辑"
            :visible.sync="dialogVisible"
            width="30%"
            @close="closeDialog('form')">
            
            <el-form ref="form" :inline="false" :model="formData" :rules="rules" label-width="180px" size="normal">
                <el-form-item label="品质ID" prop="quality_id">
                    <el-input
                    v-model="formData.quality_id"
                    placeholder="请输入品质ID"
                    />
                </el-form-item>
                
                <el-form-item label="萌宠技能" prop="skill">
                    <el-select v-model="formData.skill" value-key="id" placeholder="请选择萌宠技能" clearable filterable @change="handleChange">
                        <el-option v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item">
                        </el-option>
                    </el-select>
                    
                </el-form-item>
                <el-form-item label="效果值" prop="count">
                    <el-input v-model="formData.count" placeholder="请输入效果值"></el-input>
                </el-form-item>

                <el-form-item v-if="formData.skill.tag === 'lucky-gift'" label="拓展配置-couple_rate" prop="count">
                    <el-input v-model="formData.couple_rate" placeholder="请输入拓展配置-couple_rate"></el-input>
                </el-form-item>

                <el-form-item v-if="formData.skill.tag === 'welcome-room'" label="拓展配置-msg" prop="ext">
                    <el-input
                    v-model="formData.msg"
                    placeholder="请输入拓展配置"
                    />
                </el-form-item>
                <el-form-item v-if="formData.skill.tag === 'welcome-room'" label="拓展配置-show" prop="ext">
                    <el-input
                    v-model="formData.show"
                    placeholder="请输入拓展配置"
                    />
                </el-form-item>
            </el-form>
            
            <span slot="footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAllocationSkill">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
    import { qualityList, qualitySkillSave, petSkillList } from '@/api/petsManagement'
  	export default {
        name: 'petQualitySkill',
        data() {
            return {
                dialogTitle: 'add',
                dialogVisible: false,
                info: {},
                loading: false,
                tableData: [],
                listQuery: {
                    page: 1,
                    perPage: 10
                },
                total: 1,
                options: [],
                formData: {
                    id: undefined,
                    quality_id: undefined,
                    skill_id: undefined,
                    count: undefined,
                    ext: undefined,
                    skill: {tag: undefined},
                    couple_rate: undefined,
                    msg: undefined,
                    show: undefined
                },
                rules: {
                    quality_id: [{ required: true, message: '请输入', trigger: 'blur' }],
                    skill: [{ required: true, message: '请选择萌宠技能', trigger: 'blur' }],
                    count: [{ required: true, message: '请输入', trigger: 'blur' }],
                },
                options: []
            }
        },
        created() {
            this.getTableData()
            this.getPetSkillList()
        },
        methods: {
            indexMethod(index) {
                return this.total - (this.listQuery.page-1) * this.listQuery.perPage - index
            },
            // 网络请求
            /**
             * getTableData
             * @desc 获取表格数据
             */
            async getTableData() {
                this.loading = true
                for (let key in this.listQuery) {
                    this.listQuery[key] = this.listQuery[key] === '' ? undefined : this.listQuery[key] == 0 ? 0 : this.listQuery[key]
                }
                const {data, code} = await qualityList(this.listQuery)
                if (code === 200) {
                    this.tableData = data.data
                    this.total = data.total
                }
                this.loading = false
        
            },
            async getPetSkillList() {
                const {data, code} = await petSkillList({
                    page: 1,
                    perPage: 200
                })
                if (code === 200) {
                    this.options = data.data
                }
        
            },
            closeDialog(form) {
                if (this.$refs[form]) {
                    this.$refs[form].clearValidate() // 清除整个表单的校验
                    this.$refs[form].resetFields() // 清除整个表单的校验
                }
                this.formData = {
                    id: undefined,
                    quality_id: undefined,
                    skill_id: undefined,
                    count: undefined,
                    ext: undefined,
                    skill: {tag: undefined},
                    couple_rate: undefined,
                    msg: undefined,
                    show: undefined
                }
            },
            handleEdit(row) {
                this.dialogVisible = true
                const rowData = JSON.parse(JSON.stringify(row))
                this.formData = {
                    id: rowData.id,
                    quality_id: rowData.quality_id,
                    skill_id: rowData.skill_id,
                    count: rowData.count,
                    ext: rowData.ext,
                    skill: rowData.skill,
                    couple_rate: rowData.couple_rate,
                    msg: rowData.msg,
                    show: rowData.show
                }
                console.log(this.formData)
                // return
                if(this.formData.ext) {

                    let ext = JSON.parse(this.formData.ext)
                    if(this.formData.skill.tag === 'lucky-gift') {
                        this.$set(this.formData,'couple_rate',ext.couple_rate)
                        // this.formData.couple_rate = ext.couple_rate
                    }
                    if(this.formData.skill.tag === 'welcome-room') {
                        this.$set(this.formData,'msg',ext.msg)
                        this.$set(this.formData,'show',ext.show)
                        // this.formData.msg = ext.msg
                        // this.formData.show = ext.show
                    }
                }
            },
            handleAdd() {
                this.dialogVisible = true
            },
            handleChange(val) {
                if(val.tag === 'lucky-gift') {
                    this.formData.couple_rate = undefined
                }
                if(val.tag === 'welcome-room') {
                    this.formData.msg = undefined
                    this.formData.show = undefined
                }
            },
            handleAllocationSkill() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        for (let key in this.formData) {
                            this.formData[key] = !this.formData[key] ? undefined : this.formData[key]
                        }
                        // console.log(JSON.parse(this.formData.ext))
                        if(this.formData.skill.tag === 'lucky-gift') {
                            this.formData.ext = {couple_rate: this.formData.couple_rate}
                        }
                        if(this.formData.skill.tag === 'welcome-room') {
                            this.formData.ext = {
                                msg: this.formData.msg,
                                show: this.formData.show
                            }
                        }
                        
                        qualitySkillSave({
                            id: this.formData.id,
                            quality_id: this.formData.quality_id,
                            skill_id: this.formData.skill.id,
                            count: this.formData.count,
                            ext: JSON.stringify(this.formData.ext)
                        }).then(res => {
                            if(res.code === 200) {
                                this.dialogVisible = false
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                })
                            }
                            this.dialogVisible = false
                            this.getTableData()
                        })
                    }
                })
            },
        }
    }
</script>
  
<style lang="scss" scoped>
::v-deep{ 
    .hide_box{
        .el-upload--picture-card {
            display: none;
        }
    }
    .el-upload-list__item {
        margin-right: 1em !important;
    }
}
.awardBox {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    .awardInfo {
        margin-right: 10px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
        width: 148px;
        height: 148px;
        border: 1px solid #c0ccda;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;

        .closeIcon {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            background: rgba(0,0,0,.6);
            color: #ffffff;
            overflow: hidden;
            cursor: pointer;
            font-size: 18px;
            opacity: 0;
            z-index: 0;
        }
    }
    .hide_box:hover {
        .closeIcon {
            opacity: 1;
            z-index: 1;
        }
    }
    .show_box {
        .closeIcon {
            opacity: 0;
            z-index: -1;
        }
    }
}
.item {
    width: 100px;
}
.formItemBox{
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	width: 100%;
	overflow: hidden;
}
::v-deep {
	.formItemBox{
		.el-form-item {
			width: 50% !important;
		}
	}
    
}

</style>
  